<script setup lang="ts">
  import { ref } from "vue"
  import { getRecipePlanAssessment } from '@/api/Recipe';

  const planAssessment = ref()
  const initialPages = {
    currentPage: 1,
    pageSize: 15,
    total: 0,
  }
  let pages = ref({
    ...initialPages
  })
  let loading = ref(false)
  const recipePlanId = ref('')
  const evaluationColumn = [{
    key: "dishName",
    width: 120,
    name: "菜肴名称 ",
  },
  {
    key: "dishCost",
    width: 120,
    name: "成本",
    align: 'right'
  },
  {
    key: "dishSellPrice",
    name: "售价",
    width: 200,
    align: 'right'
  },
  {
    key: "dishCopiesTotal",
    name: "总份数",
    align: 'right'
  },
  {
    key: "dishWeightTotal",
    name: "总出品重量(kg)",
    width: 130,
    align: 'right'
  },
  {
    key: "dishSellPriceTotal",
    name: "预计金额(元)",
    align: 'right'
  },
  {
    key: "dishRoi",
    name: "投入产出比",
    width: 130,
    align: 'right'
  },

  ]

  const onInIt = (Id) => {
    recipePlanId.value = Id
    if (Id) {
      getRecipePlanAssessmentApi()
    }

  }
  const onReset = () => {
    pages.value = initialPages
    planAssessment.value = []
  }
  // 分页器修改
  const onPagesChange = () => {
    getRecipePlanAssessmentApi()

  }
  const changeExpand = (index) => {
    expandList.value[index].expand = !expandList.value[index].expand
  }
  // 获取菜谱评估数据 
  const getRecipePlanAssessmentApi = async () => {
    console.log(1233);
    loading.value = true
    let { total, ...arg } = pages.value
    let res = await getRecipePlanAssessment({
      ...arg,
      recipePlanId: recipePlanId.value
    })
    loading.value = false
    if (res.code == 2000) {
      pages.value.total = res.data.total
      planAssessment.value = res.data.records
    }
  }
  defineExpose({ onInIt, onReset })
</script>

<template>
  <div>
    <pb-table :column="evaluationColumn" style="border-radius: 4px" :bottomElement="['pb-page']"
      :tableData="planAssessment" :border="true" :loading="loading"></pb-table>
    <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize" @onChange="onPagesChange"
      :total="pages.total"></pb-pagination>
  </div>



</template>

<style lang="scss" scoped>
  .weeklyRecipeTable {
    color: var(--pb-color-light-8);

    border-right: 0px;
    border-radius: 4px;
    height: 100%;
  }

  .heard {
    /* height: 100px; */
    border-top: 1px solid var(--pb-color-light-4);
    border-left: 1px solid var(--pb-color-light-4);
  }

  .heard-item {
    width: 80px;
    height: 40px;
    /* line-height: 40px; */
    padding: 9px 16px;
    /* text-align: center; */
    /* width: 256px; */
    background-color: var(--pb-color-light-2);
    border-right: 1px solid var(--pb-color-light-4);
  }

  .content {
    height: calc(100% - 60px);
  }

  .content-td {
    display: flex;
    flex-direction: column;
    width: 80px;


  }

  .content-tr {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 50px;
    overflow: hidden;
    transition: all 0.5s;

    border-right: 1px solid var(--pb-color-light-4);
    border-bottom: 1px solid var(--pb-color-light-4);
  }



  .content {
    display: flex;
  }

  .dishBox {
    padding: 12px 16px;
  }

  .dishBox-heard {
    color: var(--pb-color-light-7);
  }

  .downIcon {
    transition: all 0.5s;

  }

  .down {
    transform: rotate(180deg);
  }

  .operate {
    height: 38px;
    padding: 0 16px;
    background: #FFFFFF;
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.02), 0px -4px 12px 0px rgba(0, 0, 0, 0.03);

    .num {
      font-size: 14px;
    }
  }
</style>